<template>
    <view class="content">
		<view class="nav-t">
		    <view :class="{active : type == 1}" @click="chooseNav(1)">门店</view>
		    <view :class="{active : type == 2}" @click="chooseNav(2)">楼盘</view>
		</view>
		
        <view class="wrapper">
			<view class="top" @click="show = true">
				{{ date }}
				<u-icon name="arrow-down-fill" color="#a5a5a5" size="24" class="u-m-l-15"></u-icon>
			</view>
			
			<view class="nav">
				<view class="nav-i" v-for="(item, index) in cate" :class="{activeCate : cId == item.id}" :key="index" 
					@click="chooseCate(item)">
					{{item.name}}：{{item.count}}人
				</view>
			</view>
			
			<view class="box" v-for="(item, index) in list" :key="index">
				<view class="item">
					<view class="left">序号：</view>
					<view class="right">{{item.number}}</view>
				</view>
				<view class="item">
					<view class="left">门店名称：</view>
					<view class="right">{{item.stores}}</view>
				</view>
				<view class="item">
					<view class="left">楼盘名称：</view>
					<view class="right">{{item.pro_name}}</view>
				</view>
				<view class="item">
					<view class="left">签到日期：</view>
					<view class="right">{{item.create_time}}</view>
				</view>
				<view class="item">
					<view class="left">签到人：</view>
					<view class="right">{{item.user_name}}</view>
				</view>
			</view>
			<view style="height: 94rpx;padding-top: 30rpx;">
			    <u-loadmore :status="status" v-if="status != 'loadmore'" />
			</view>
		</view>
		
		<u-picker v-model="show" mode="time" @confirm="confirmDate"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show: false,
                date: '请选择',
				type: 1, //1门店 2楼盘
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
				cate: [], 
				cId: '',
            };
        },
        onLoad() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1; // 月份从0开始，需要加1
            const day = now.getDate();
			this.date = year + '-' + (month > 10 ? month : '0' + month) + '-' + day
			
			this.getCate()
			this.getList()
        },
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
            // 选择日期
            confirmDate(e) {
            	console.log(e)
            	this.date = e.year + '-' + e.month + '-' + e.day
				this.getCate()
				this.doSearch()
            },
			
			chooseNav(num) {
			    if (this.type == num) return
			    this.type = num
				this.getCate()
			    this.doSearch()
			},
			
			// 选择门店或楼盘
			chooseCate(item) {
				if (this.cId == item.id) return
				this.cId = item.id
				this.getCate()
				this.doSearch()
			},
			
			doSearch() {
			    this.page = 1
			    this.list = []
			    this.status = 'loadmore'
			    this.getList()
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('operation_sign_record', {
					user_token: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
			        type: this.type,// 1门店 2楼盘
			        date: this.date,//时间搜索
					id: this.cId,
				}).then(ret => {
					if (ret.success == 1000) {
						if (ret.detail.data.length > 0) {
							this.list = this.list.concat(ret.detail.data);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			getCate() {
				this.$ajax('operation_sign', {
					user_token: this.$getSync('userToken'),
			        type: this.type,// 1门店 2楼盘
					date: this.date,//时间搜索
				}).then(ret => {
					if (ret.success == 1000) {
						this.cate = ret.detail
						if (this.cate && this.cate[0] && this.cate[0].id) {
							this.cId = this.cate[0].id
						}
						
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
		border-top: 2rpx solid #e6e6e6;
    }
	.wrapper{
		padding: 30rpx 20rpx;
	}
	.nav-t{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    background-color: #fff;
	}
	.nav-t>view{
	    width: calc(100vw / 2);
	    padding: 30rpx 0;
	    font-size: 26rpx;
	    text-align: center;
	}
	.active{
	    font-size: 28rpx;
	    font-weight: bold;
	    color: #00a1e9;
	    border-bottom: 2rpx solid #00a1e9;
	}
	
	.top{
		padding-bottom: 25rpx;
	}
	.nav{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		padding-bottom: 15rpx;
	}
	.nav-i{
		font-size: 26rpx;
		color: #00a1e9;
		padding: 18rpx 16rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	.activeCate{
		background-color: #00a1e9;
		color: #fff;
	}
	.box{
		padding: 25rpx 30rpx 15rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	.item{
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
	}
	.left{
		width: 140rpx;
	}
	.right{
		flex: 1;
		white-space: pre-line;
		word-break: break-all;
	}
	
	

</style>
